<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" class="form-container">
      <sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
          保存
        </el-button>
        <el-button v-loading="loading" type="warning" @click="draftForm">
          草稿
        </el-button>
      </sticky>
      <div class="createPost-main-container">
        <!-- <aside>
          Creating and editing pages
          <a href=""  target="_blank">Document</a>
        </aside> -->
        <el-row :gutter="20">
          <el-col :span="22">
            <el-form-item style="margin-bottom: 30px;" prop="title">
              <MDinput v-model="postForm.title" :maxlength="100" required>
                活动标题
              </MDinput>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label-width="80px" label="开始时间:" prop="begin_time" class="postInfo-container-item">
              <el-date-picker v-model="postForm.begin_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="80px" label="结束时间:" prop="begin_time" class="postInfo-container-item">
              <el-date-picker v-model="postForm.end_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="60px" label="折扣:" prop="rebate" class="postInfo-container-item">
              <el-input-number v-model="postForm.rebate" :precision="2" :step="1.0" size="medium"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="活动封面" >
          <el-upload :limit="imgUploadLimit" :action="imgUploadUrl" :file-list="fileList"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleUploadRemove" :on-success="handleUploadSuccess" :on-exceed="handleUploadExceed" :on-error="handleUploadError" >
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">1、只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-dialog :visible.sync="uploadDialogVisible">
            <img width="100%" :src="uploadDialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item  prop="content" style="margin-bottom: 30px;">
          <Tinymce ref="editor" v-model="postForm.content" :height="300" menubar=""/>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="启用" prop="enable">
             <el-switch  v-model="postForm.enable"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import Upload from '@/components/Upload/SingleImage3'
  import MDinput from '@/components/MDinput'
  import Sticky from '@/components/Sticky' // 粘性header组件
  import API from '@/api/activity'
  import imageAPI from '@/api/image'
  const defaultForm = {
    id: undefined,
    status: 1,
    title: '',
    begin_time: '',
    end_time: '',
    rebate: 0,
    cover: '',
    enable:true,
    content: ''
  }

  export default {
    name: 'activityDetail',
    components: {
      Tinymce,
      MDinput,
      Upload,
      Sticky
    },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: rule.label + '为必传项',
            type: 'error'
          })
          callback(new Error(rule.label + '为必传项'))
        } else {
          callback()
        }
      }

      return {
        postForm: Object.assign({}, defaultForm),
        loading: false,
        fileList:[],
        uploadDialogImageUrl: '',
        uploadDialogVisible: false,
        imgUploadLimit:1,
        imgUploadUrl:"https://localhost:5001/api/image/upload",
        rules: {
          name: [{
            validator: validateRequire,
            label: '活动标题'
          }],
          begin_time: [{
            validator: validateRequire,
            label: '开始时间'
          }],
          end_time: [{
            validator: validateRequire,
            label: '结束时间'
          }],
          cover: [{
            validator: validateRequire,
            label: '活动封面'
          }]
        },
        tempRoute: {}
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.content_short.length
      },
      displayTime: {
        // set and get is useful when the data
        // returned by the back end api is different from the front end
        // back end return => "2013-06-25 06:59:25"
        // front end need timestamp => 1372114765000
        get() {
          return (+new Date(this.postForm.display_time))
        },
        set(val) {
          this.postForm.display_time = new Date(val)
        }
      }
    },
    created() {
      const id = this.$route.query && this.$route.query.id
      id&& this.fetchOne(id);
      // Why need to make a copy of this.$route here?
      // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
      // https://github.com/PanJiaChen/vue-element-admin/issues/1221
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      fetchOne(id) {
        API.fetchOne(id).then(response => {
          this.postForm = response.data
          this.fileList=[{name: response.data.cover, url:response.data.cover }]
          // set tagsview title
          this.setTagsViewTitle()
          // set page title
          this.setPageTitle()
        }).catch(err => {
          console.log(err)
        })
      },
      setTagsViewTitle() {
        const title = '活动修改'
        const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.name}` })
        this.$store.dispatch('tagsView/updateVisitedView', route)
      },
      setPageTitle() {
        const title = '活动修改'
        document.title = `${title} - ${this.postForm.name}`
      },
      submitForm() {
        console.log(this.postForm)
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true
            if(this.postForm.id){ //id存在表示修改
              API.update(this.postForm).then(() => {
                this.$notify({
                  title: '提交成功',
                  message: '修改活动成功',
                  type: 'success',
                  duration: 1000
                })
              })
            }else{
                API.add(this.postForm).then(() => {
                  this.$notify({
                    title: '提交成功',
                    message: '发布活动成功',
                    type: 'success',
                    duration: 1000
                   })
                })
            }
            this.$router.push({path:'/admin/activity'})
            this.loading = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      draftForm() {
        if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
          this.$message({
            message: '请填写必要的标题和内容',
            type: 'warning'
          })
          return
        }
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true,
          duration: 1000
        })
        this.postForm.status = 'draft'
      },
      handleUploadRemove(file, fileList) {
         //console.log(file, fileList);
         imageAPI.delete(file.id)
         this.postForm.cover=''
      },
      handleUploadSuccess(response, file, fileList) {
         //console.log(file, fileList);
         if(!response.status){
            this.$message.error(response.msg);
            fileList.pop()
            return
         }
         file.id=response.data.id
         this.postForm.cover=response.data.path
      },
      handlePictureCardPreview(file) {
        this.uploadDialogImageUrl = file.url;
        this.uploadDialogVisible = true;
      },
      handleUploadExceed(files, fileList){
        this.$message.warning(`当前限制选择 ${this.imgUploadLimit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      handleUploadError(err, file, fileList){
         this.$message.error(`上传文件${file.name}失败`);
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  .createPost-container {
    position: relative;

    .createPost-main-container {
      padding: 40px 45px 20px 50px;

      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;

        .postInfo-container-item {
          float: left;
        }
      }
    }

    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }

  .activity-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }
</style>
